<template>
  <div class="node-view">
    <div class="node-item">
      <div class="left-item">
        <div class="icon-view">
          <SvgIcon v-if="isChildren" class="ex-icon" :icon="`${isExpand ? 'systolic' : 'expand'}`"
            @click.stop="isExpand = !isExpand"></SvgIcon>
          <SvgIcon v-else class="icon" icon="icon-tool"></SvgIcon>
        </div>
        <div class="label-view">
          {{ data.name }}
        </div>
      </div>
      <div class="right-item" :style="{ width: w ? `${w / 2}px` : '' }">
        <NodeValue :data="data" :readonly="readonly" @updateForm="handleUpdate" />
      </div>
    </div>
    <div v-if="isChildren" class="node-children">
      <div v-show="isExpand">
        <NodeItem v-for="(x, i) in data.child" :key="i" :data="x" :w="w" :readonly="readonly"
          @updateForm="handleUpdate" />
      </div>
    </div>
    <!-- <div v-if="data.ControlType === 'Choice' && data.Value && data.ControlType === 'Sequence'" class="node-children">
      <NodeItem v-for="(x, i) in data.Value.Child" :key="i" :data="x" :w="w" :readonly="readonly" />
    </div> -->
    <div v-if="data.controlType === 'Choice' && data.value" class="node-children">
      <NodeItem v-for="(x, i) in [data.value]" :key="i" :data="(x as nodeItem)" :w="w" :readonly="readonly"
        @updateForm="handleUpdate" />
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, computed } from "vue";
import type { nodeItem } from "../index.d";
import NodeValue from "./NodeValue.vue";

export default defineComponent({
  name: "NodeItem",
  components: {
    NodeValue
  },
  props: {
    data: {
      type: Object as () => nodeItem,
      required: true
    },
    w: {
      type: Number,
      required: true
    },
    readonly: {
      type: Boolean,
      required: true
    }
  },
  setup(props, { emit }) {
    const isExpand = ref(props.data.isExpand !== false);
    const isChildren = computed(() => {
      return props.data.child && props.data.child.length > 0;
    });
    const handleUpdate = (data: nodeItem) => {
      emit("updateForm", data);
    };
    return {
      isExpand,
      isChildren,
      handleUpdate
    };
  }
});
</script>
<style lang="scss" scoped>
.node-view {
  &::before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #e9e9e9;
  }

  .node-view {
    padding-left: 24px;
  }

  .node-item {
    display: flex;
    height: 30px;

    >div {
      box-sizing: border-box;
      height: 100%;
    }

    .left-item {
      flex: 1;
      min-width: 100px;
      display: flex;
      align-items: center;
      border-top: 1px solid #e9e9e9;

      .icon-view {
        user-select: none;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 5px;
        padding-right: 5px;

        :deep(.svg-icon) {
          width: 100%;
          height: 100%;
          color: #e9e9e9;

          &.ex-icon {
            cursor: pointer;
          }

          &.icon {
            color: #666;
          }
        }
      }

      .label-view {
        font-size: 12px;
        color: #616575;
      }

      .sequence-tit {
        :deep(.el-input) {
          .el-input__inner {
            border: 0;
            background-color: transparent;
          }
        }
      }
    }

    .right-item {
      width: 300px;
      border-left: 1px solid #e9e9e9;
      border-top: 1px solid #e9e9e9;
    }
  }
}
</style>
